<template>
  <div class="Membershipcard">
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">会员信息</span>
      </div>
    </div>
    <!-- 乘客信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">乘客信息</span>
      </div>
    </div>
    <el-table
      border
      :data="QueryList"
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      style="width: 100%; margin-top: 20px; margin-left: 10px"
    >
      <el-table-column prop="orderitemid" label="编号" width="240">
      </el-table-column>
      <el-table-column prop="name" label="乘客姓名" width="80">
      </el-table-column>
      <!-- <el-table-column prop="guestName" label="车票类型" width="80">
      </el-table-column> -->
       <el-table-column prop="idtype" label="证件类型" width="80">
          <template slot-scope="scope">
              <template v-if="scope.row.idtype=='ID_CARD'">身份证</template>
              <template v-if="scope.row.idtype=='MILITARY_ID'">军人证</template>
              <template v-if="scope.row.idtype=='PASSPORT'">护照</template>
              <template v-if="scope.row.idtype=='MTPFHKAMR'">港澳居民来往内地通行证</template>
              <template v-if="scope.row.idtype=='MTPFTR'">台湾居民来往大陆通行证</template>
               <template v-if="scope.row.idtype=='RPFHKMATR'">台湾居民来往大陆通行证</template>
        </template>
       </el-table-column>
      <el-table-column prop="idnumber" label="证件号">
      </el-table-column>
      <!-- <el-table-column prop="cabin" label="证件有效期" width="80">
      </el-table-column> -->
      <!-- <el-table-column prop="trainNumber" label="车次" width="80">
      </el-table-column>
      <el-table-column prop="guestInformations[0].trainBox" label="车厢号" width="80">
      </el-table-column>
      <el-table-column prop="guestInformations[0].seatNo" label="座位号" width="80">
      </el-table-column>
      <el-table-column prop="guestInformations[0].seatType" label="席别" width="80">
      </el-table-column>
      <el-table-column prop="ticketPrice" label="实际票价" width="80">
      </el-table-column>
      <el-table-column prop="departureStationName" label="发车站" width="80">
      </el-table-column>
      <el-table-column prop="arrivalStationName" label="到达站" width="80">
      </el-table-column> -->

      <!-- <el-table-column prop="departureTime" label="出发时间" width="160">
      </el-table-column>
      <el-table-column prop="arrivalTime" label="到达时间" width="160">
      </el-table-column> -->

      <el-table-column prop="paymentOrderStatus" label="支付状态" width="100">
        <template slot-scope="scope">
              <template v-if="scope.row.paymentOrderStatus=='waitPay'">等待支付</template>
              <template v-if="scope.row.paymentOrderStatus=='payd'">已支付</template>
              <template v-if="scope.row.paymentOrderStatus=='cancelOrder'">取消支付</template>
              <template v-if="scope.row.paymentOrderStatus=='unexecuted'">未支付</template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 预定信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">预定信息</span>
      </div>
    </div>
    <div class="table">
      <table>
        <tr>
          <td class="td-1">主订单编号</td>
          <td class="td-2">{{orderid}}</td>
          <td class="td-1">子订单编号</td>
          <td class="td-2">{{orderitemid}}</td>
           <td class="td-1">票单价</td>
          <td class="td-2">{{ticketPrice}}</td>
        </tr>
         <tr>
          <td class="td-1">预定时间</td>
          <td class="td-2">{{QueryLists.createTime}}</td>
          <td class="td-1">预定员</td>
          <td class="td-2"></td>
          <td class="td-1">改签差价</td>
          <td class="td-2">{{differencePrice}}</td>
        </tr> <tr>
          <td class="td-1">订单状态</td>
          <td class="td-2">{{orderStatus}}</td>
          <td class="td-1">支付状态</td>
          <td class="td-2">{{paymentOrderStatus}}</td>
          <td class="td-1">支付方式</td>
          <td class="td-2"></td>
        </tr> <tr>
          <td class="td-1">订单来源</td>
          <td class="td-2"></td>
          <td class="td-1">平台交易号</td>
          <td class="td-2"></td>
          <td class="td-1">订单类型</td>
          <td class="td-2"></td>
        </tr> <tr>
          <td class="td-1">联系人</td>
          <td class="td-2">{{name}}</td>
          <td class="td-1">联系手机</td>
          <td class="td-2"></td>
          <td class="td-1">删除时间</td>
          <td class="td-2"></td>
        </tr>
        
      </table>
      <table> <tr>
          <td class="td-1">备注</td>
          <td class="td-4"></td>
        </tr>
          <tr>
          <td class="td-1">退票政策</td>
          <td class="td-4">1.成人退票时，名下如有儿童票，须一同退票
            2.票面乘车站开车48小时以上的，退票时收票价5%的退票费
            3.开车前24小时以上的，不足48小时的，退票时收票价10%的退票费
            4。开车前不足24小时的，退票时收票价20%的退票费。<br>
            退票到账时间<br>
            退票成功后，将向您注册时提供的手机号发送退票成功短信<br>
            退票时间大概在3-15个工作日
          </td>
        </tr>
      </table>
    </div>
    <!-- 操作信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">操作信息</span>
      </div>
    </div>
    <div>
      <el-table
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column prop="date" label="操作标题" width="300">
        </el-table-column>
        <el-table-column prop="name" label="操作人姓名" width="300">
        </el-table-column>
        <el-table-column prop="name" label="操作时间" >
        </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
      </el-table>
    </div>
     <el-button class="button" type="success" @click="success">返回</el-button>
  </div>
</template>

<script>
export default {
  name: "Membershipcard",
  data() {
    return {
      tableData:[],
      name:"",
      orderStatus:"",
      paymentOrderStatus:"",
      differencePrice:"",
      ticketPrice:"",
      orderitemid:"",
      orderid:"",
      orderno:"",
      jsjid: "",
      condition: {},
      customerId: "",
      // 会员信息
      Member: {
        customerName: "",
        customerCard: "",
        jsiId: "",
      },
      // 订单号
      ordernumber:"",
      QueryList: [],
      QueryLists: {},
      // 乘客信息列表
      passengerInformationList: {},
    };
  },

  methods: {
    success() {
      this.$router.push({
        name: "endorseback",
      });
    },
    // 退改签详情
    postqueryTrainChangeOrder(){
      
      this.$axios.postqueryTrainChangeOrder({
        orderId:this.$route.params.fsadafList
      }) .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // guestInformations
            this.QueryList=res.data
            console.log(this.QueryList)
            this.QueryLists = res.data
            console.log(this.QueryLists);
            this.orderid=this.QueryLists[0].orderid
            this.orderitemid=this.QueryLists[0].orderitemid
            this.ticketPrice=this.QueryLists[0].ticketPrice
            this.differencePrice=this.QueryLists[0].differencePrice
            this.paymentOrderStatus=this.QueryLists[0].paymentOrderStatus
            if(this.paymentOrderStatus=='payd'){
              this.paymentOrderStatus='已支付'
            }
             if(this.paymentOrderStatus=='waitPay'){
              this.paymentOrderStatus='等待支付'
            }
             if(this.paymentOrderStatus=='cancelOrder'){
              this.paymentOrderStatus='取消支付'
            }
             if(this.paymentOrderStatus=='unpaid'){
              this.paymentOrderStatus='未支付'
            }
            this.orderStatus=this.QueryLists[0].orderStatus
            if(this.orderStatus=='unpaid'){
              this.orderStatus='未支付'
            }
            if(this.orderStatus=='ticketFail'){
              this.orderStatus='出票失败'
            }
            if(this.orderStatus=='ticketing'){
              this.orderStatus='出票成功'
            }
            this.name=this.QueryLists[0].name
          }
        });
    },
    // 支付页过来直接调用
    //  getqueryTrain() {
    //   
    //   this.$axios
    //     .getqueryTrainOrder({
    //       orderNumber: this.$route.params.orderNumber,
    //       customerId:this.$route.params.customerId
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       if (res.code == "200") {
    //         // guestInformations
    //         this.QueryList=res.data.guestInformations
    //         console.log(this.QueryList)
    //         this.QueryLists = res.data
    //         console.log(this.QueryLists);
    //         localStorage.setItem("isToken", true); 
    //       }
    //     });
    //   
    // },

  },

  mounted() {
    this.postqueryTrainChangeOrder()
  },
};
</script>
<style scoped>
/* 顶部 */
.header-1-1-1 {
  margin: 20px;
  color: black;
  font-weight: bold;
}
.button {
  margin-left: 44%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.table {
  border: 1px solid #f0f2f6;
  width: 100%;
  height: 450px;
}
.td-1 {
  width: 150px;
  height: 40px;
  background-color: #faffff;
  border-right: 0.5px solid #bcbec6;
  border-bottom: 0.5px solid #bcbec6;
}
.td-2 {
  width: 300px;
  border-right: 0.5px solid #bcbec6;
  border-bottom: 0.5px solid #bcbec6;
}
.td-4 {
  width: 800px;
  border-right: 0.5px solid #bcbec6;
  border-bottom: 0.5px solid #bcbec6;
}
</style>
